<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌手排行 - Music Website</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<script>

</script>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <a href="shoye.html">Music Website</a>
            </div>
            <nav>
               <ul>
                        <li><a href="{{ url_for('index') }}">首页</a></li>
                        <li><a href="#">发现</a></li>
                        <li><a href="{{ url_for('singer_page') }}">歌手</a></li>
                        <li><a href="#">排行榜</a></li>
                        <li><a href="#">我的音乐</a></li>
                    </ul>
            </nav>
            <div class="search-bar">
                <input type="text" id="searchInput" placeholder="搜索歌曲、专辑、MV">
                <button id="searchButton">搜索</button>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <!-- 筛选栏 -->
            <section class="filter-bar">
                <div class="filter-group">
                    <span class="filter-title">首字母</span>
    <a href="#" class="filter-link" data-type="index" data-value="-100">全部</a>
    <a href="#" class="filter-link" data-type="index" data-value="A">A</a>
    <a href="#" class="filter-link" data-type="index" data-value="B">B</a>
    <a href="#" class="filter-link" data-type="index" data-value="C">C</a>
    <a href="#" class="filter-link" data-type="index" data-value="D">D</a>
    <a href="#" class="filter-link" data-type="index" data-value="E">E</a>
    <a href="#" class="filter-link" data-type="index" data-value="F">F</a>
    <a href="#" class="filter-link" data-type="index" data-value="G">G</a>
    <a href="#" class="filter-link" data-type="index" data-value="H">H</a>
    <a href="#" class="filter-link" data-type="index" data-value="I">I</a>
    <a href="#" class="filter-link" data-type="index" data-value="J">J</a>
    <a href="#" class="filter-link" data-type="index" data-value="K">K</a>
    <a href="#" class="filter-link" data-type="index" data-value="L">L</a>
    <a href="#" class="filter-link" data-type="index" data-value="M">M</a>
    <a href="#" class="filter-link" data-type="index" data-value="N">N</a>
    <a href="#" class="filter-link" data-type="index" data-value="O">O</a>
    <a href="#" class="filter-link" data-type="index" data-value="P">P</a>
    <a href="#" class="filter-link" data-type="index" data-value="Q">Q</a>
    <a href="#" class="filter-link" data-type="index" data-value="R">R</a>
    <a href="#" class="filter-link" data-type="index" data-value="S">S</a>
    <a href="#" class="filter-link" data-type="index" data-value="T">T</a>
    <a href="#" class="filter-link" data-type="index" data-value="U">U</a>
    <a href="#" class="filter-link" data-type="index" data-value="V">V</a>
    <a href="#" class="filter-link" data-type="index" data-value="W">W</a>
    <a href="#" class="filter-link" data-type="index" data-value="X">X</a>
    <a href="#" class="filter-link" data-type="index" data-value="Y">Y</a>
    <a href="#" class="filter-link" data-type="index" data-value="Z">Z</a>
    <a href="#" class="filter-link" data-type="index" data-value="0">#</a>
</div>
                <div class="filter-group">
                    <span class="filter-title">地区</span>
                    <a href="#" class="filter-link" data-type="area" data-value="-100">全部</a>
                    <a href="#" class="filter-link" data-type="area" data-value="200">内地</a>
                    <a href="#" class="filter-link" data-type="area" data-value="2">港台</a>
                    <a href="#" class="filter-link" data-type="area" data-value="5">欧美</a>
                    <a href="#" class="filter-link" data-type="area" data-value="4">日本</a>
                    <a href="#" class="filter-link" data-type="area" data-value="3">韩国</a>
                </div>
                <div class="filter-group">
                    <span class="filter-title">性别/组合</span>
                    <a href="#" class="filter-link" data-type="sex" data-value="-100">全部</a>
                    <a href="#" class="filter-link" data-type="sex" data-value="1">男</a>
                    <a href="#" class="filter-link" data-type="sex" data-value="2">女</a>
                    <a href="#" class="filter-link" data-type="sex" data-value="3">组合</a>
                </div>
            </section>

            <!-- 歌手排行部分 -->
            <section class="singer-rankings">
                <h2>歌手排行</h2>
                <div class="mod_singer_list">
                    <!-- 前十个歌手 -->
                </div>
                <ul class="singer_list_text">
                    <!-- 剩余歌手文本列表项 -->
                </ul>
            </section>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Music Website. All rights reserved.</p>
        </div>
    </footer>

    <!-- JavaScript 代码 -->
<script src="{{ url_for('static', filename='search.js') }}" defer></script>
    <script src="{{ url_for('static', filename='script.js') }}" defer></script>
    <script src="{{ url_for('static', filename='research.js') }}" defer></script>
</body>
</html>
